<template>
    <div class="login_wrap">
        <div class="form_wrap">
            <h2 style="color: #404040">用户登录</h2>
            <el-form :model="loginData" class="demo-dynamic">
                <el-form-item prop="phone"
                    :rules="[{ required: true, message: '请输入账号', trigger: 'blur', pattern: /^[1][34578][0-9]{9}$/ }]">
                    <el-input v-model="loginData.phone" prefix-icon="User" placeholder="账号:13828614126" />
                </el-form-item>
                <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                    <el-input v-model="loginData.password" type="password" prefix-icon="Lock" placeholder="密码:123456" />
                </el-form-item>
                <el-button type="primary" class="login_btn" @click="userLogin">登&nbsp;&nbsp;录</el-button>
                <div style="margin-top: 10px;">
                    <span class="left">
                        <span text @click="dialogFormVisible = true">
                            <router-link to="/register" class="link">立即注册</router-link>
                        </span>
                    </span>
                    <span class="right">
                        <router-link to="/forgot" class="link">忘记密码?</router-link>
                    </span>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { toRefs, reactive } from '@vue/reactivity'
import { userLoginApi } from "../utils/clientApi"
import { useRouter } from "vue-router"
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
    name: 'Login',
    setup() {
        const store = useStore()
        const router = useRouter()
        // 数据域
        const data = reactive({
            loginData: {
                phone: '', password: ''
            },
            user: {
                id: 0,
                name: "",
                sex: "",
                email: "",
                phone: "",
                password: "",
                userpic: "",
                isLocked: 0,
                createdtime: "",
                updatedtime: ""
            }
        })
        // 方法域begin
        const userLogin = () => {
            userLoginApi(data.loginData).then(res => {
                if (res.status === 200) {
                    ElMessage.success(res.msg)
                    store.commit('user', res.data)
                    store.commit("token", JSON.stringify(res.token))
                    data.user = res.data
                    localStorage.setItem('userInfo', JSON.stringify(data.user))
                    localStorage.setItem("token", JSON.stringify(res.token))

                    router.push({
                        path: "/",

                    })
                } else {
                    ElMessage.error(res.msg)
                    router.push({
                        path: "/login"
                    })
                }
            })
        }

        // 方法域end
        return {
            // 返回的方法名
            ...toRefs(data),
            userLogin
        }
    }




}
</script>

<style>
.login {
    width: 100%;
    height: 100%;
    background: red;
}

.login_wrap {
    width: 100%;
    height: 100vh;
}

.form_wrap {
    width: 350px;
    height: 230px;
    position: fixed;
    padding: 0 20px 30px 20px;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffff;
    box-shadow: 3px 5px 5px 3px #c4bfbf;

}

#login-bg {
    /*
    登录页背景图
    */

    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.login_btn {
    display: block;
    margin: 0 auto;
    width: 100%;

}

h3 {
    text-align: center;
    line-height: 24px;

}

.left {
    float: left;


}

.right {
    float: right;

}

.link {
    color: rgb(0, 157, 255);
    font-size: 13px;
}
</style>